<template>
    <section v-loading="loading" class="cms-body">
         <div class="cms-list-header">
            <el-form  ref="form" :model="param" :rules="rules"  label-width="162px">
                  <el-row :gutter="10">
                      <el-col :span="6">
                            <el-form-item label="敏感词"  prop="search">
                               <el-input v-model="param.search"></el-input>
                            </el-form-item> 
                      </el-col>
                      <el-col :span="6">
                            <el-form-item label="替换为" prop="replacement">
                                  <el-input v-model="param.replacement" ></el-input>
                           </el-form-item>
                    </el-col>
                    <el-col :span="3">&nbsp;</el-col> 
                    <el-col :span="4">
                         <el-button type="primary"  icon="el-icon-plus" 
                              @click="add()" v-perms="'/sensitivity/add'"   >添加
                           </el-button>
                     </el-col>
              </el-row>
            </el-form>
         </div>
         <el-table :data="tableData" stripe style="width: 100%" @selection-change="checkIds">
            <el-table-column type="selection" width="65" align="right"></el-table-column>
            <el-table-column prop="id" label="ID" width="50" align="center"></el-table-column>
            <el-table-column prop="search" label="敏感词" align="center"  >
               <div slot-scope="scope">  
                     <el-input v-model="scope.row.search" class="cms-width"></el-input>
                </div> 
            </el-table-column>
             <el-table-column align="center" width="50" >
            </el-table-column>
            <el-table-column prop="replacement" label="替换为" align="center"  >
                <div slot-scope="scope">  
                     <el-input v-model="scope.row.replacement" class="cms-width"></el-input>
                </div> 
            </el-table-column>

            <el-table-column label="操作"   align="center">
                <div slot-scope="scope">                  
                    <cms-button type="delete" @click.native="deleteBatch($api.wordSensitivityDelete,scope.row.id)"
                         v-perms="'/sensitivity/delete'"
                    ></cms-button>                 
                </div>
            </el-table-column>
         </el-table> 
          <!-- 表格底部 -->
        <div class="cms-list-footer ">
            <div class="cms-left">
                <el-button :disabled="disabled" @click="deleteBatch($api.wordSensitivityDelete,ids)"
                        v-perms="'/sensitivity/delete'"
                  >批量删除</el-button>
                 
                  <el-button :disabled="disabled" @click="save(ids)"
                        v-perms="'/sensitivity/update'"
                  >保存内容</el-button>
            </div>
              
          </div>  
     </section>   
</template>

<script>
import listMixins from '@/mixins/list';
import listMixin from '@/mixins/form';
import va from "@/rules";
import axios from "axios";
export default {
    mixins:[listMixins,listMixin],
  data() {
    let self = this;
    let required = va.required('此项必填');
    return {
      params: {//只需要业务参数    
      
      },
      rules: {//校验规则
        search:[required],
        replacement:[required],
      },
      param:{
          search:'',
          replacement:''
      }

    };
  },
  methods:{
      save(ids){
          let replacements=[];
          let searchs=[];
          let idss=[]
          for(let i in this.tableData){
              idss.push(this.tableData[i].id)
              replacements.push(this.tableData[i].replacement)
              searchs.push(this.tableData[i].search)
          }
           this.$http.post(this.$api.wordSensitivityUpdate,{replacements:replacements.join(','),
                  ids:idss.join(','),searchs:searchs.join(',')}).then(res => {
                    if(res.code == '200'){  
                          this.successMessage('保存成功');
                          this.initTableData(this.$api.wordSensitivityList,this.params);  
                          this.param.search='';  
                          this.param.replacement='';    
                    }   
                    this.loading = false;
            }).catch(error => {
                this.loading = false;
            })
      },
      add(){
            let form = this.$refs['form'];
            form.validate((valid) => {//验证方法
                if(valid){
                    this.loading = true;
                     this.$http.post(this.$api.wordSensitivitySave,this.param).then(res => {
                            if(res.code == '200'){  
                                this.initTableData(this.$api.wordSensitivityList,this.params);  
                                this.param.search='';  
                                this.param.replacement='';    
                            }
                            this.loading = false;
                     }).catch(error => {
                        this.loading = false;
                      })   
                }else{
                     return false
                }
            })
      },
      update(){       
      },
  },
  created(){
     this.initTableData(this.$api.wordSensitivityList,this.params);   
  }
};
</script>

<style >

</style>
